<template>
  <div class="transition">
    <div class="transition-row row-1">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
    <div class="transition-row row-2">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
//过渡动画
.transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  .transition-row {
    flex: 1;
    display: flex;
  }
  .row-1 {
    .block {
      transform-origin: top;
    }
  }
  .row-2 {
    .block {
      transform-origin: bottom;
    }
  }
  .block {
    flex: 1;
    background: #14074c;
    transform: scaleY(1);
    will-change: transform;
  }
}
</style>
